<template>
    <ul>
        <li v-for="item in productStore.all" :key="item.id">
            {{item.title}} - {{item.price}}
        <br/>
        <button 
            :disabled = "!item.inventory"
            @click="cartStore.addProductToCart(item)"
        >点击添加到购物车</button>
        </li>
    </ul>
</template>

<script setup lang="ts">
import { useCartStore } from '../store/cart'
import { useProductStore } from '../store/products'

const productStore = useProductStore()
const cartStore = useCartStore()

productStore.loadAllProducts()
</script>
